<template>
	<view>
		<rf-topSearch headNavigationType="2" @fan="fan"></rf-topSearch>
		<view class="top">
			<image src="../../static/kjdz.png" mode="widthFix"></image>
			<view class="Show" v-if="dataList.length !=0">
				<image :src="dataList.product.picture" ></image>
			</view>
		</view>
		<view class="center">
			<view class="Normal">
				<view class="non">
					<view class="top">
						<view class="time">
							<view class="cn">
								距结束
							</view>
							<view class="tmm">
								<!-- 123 -->
								<view class="one">
									{{hour}}
								</view>
								<view class="mao">
									:
								</view>
								<view class="two">
									{{minute}}
								</view>
								<view class="mao">
									:
								</view>
								<view class="three">
									{{second}}
								</view>
							</view>
						</view>
					</view>
					<view class="foot1" v-if="dataList.length != 0">
						<view class="text">
							已砍 <span class="sp1">{{gteNum(dataList.activity_money - shopList.deal_money)}}元,</span> 只差<span class="sp2">{{ gteNum(( +shopList.deal_money)*100/+dataList.activity_money) }}%</span> 
						</view>
						<view class="tiao">
							<view class="tiao1" :style="{'width': 100 - gteNum(( +shopList.deal_money)*100/+dataList.activity_money)+'%'}" ></view>
						</view>
						
						<view class="again" @click="submitOrder()">
							继续分享
						</view>
					</view>
				</view>
				<view class="non1">
					<view class="top">
						<view class="jilu">
							<image src="../../static/jilu.png" mode=""></image>
						</view>
						<view class="title">
							砍价记录
						</view>
						<view class="jilu1">
							<image src="../../static/jilu.png" mode=""></image>
						</view>
					</view>
					
					<view class="foot1" v-if="shopList.length!=0">
						<view class="text">
							<view class="img">
								<image :src="shopList.member.head_portrait" mode=""></image>
							</view>
							<view class="name">
								{{shopList.member.realname}}
							</view>
							<view class="img1">
								<image src="../../static/kjsp.png" mode=""></image>
							</view>
							<view class="cont">
								砍了{{shopList.bargain_money}}元
							</view>
						</view>
					</view>
					<view class="foot1" v-for="(item,index) in bargainList" :key="index">
						<view class="text">
							<view class="img">
								<image :src="item.member.head_portrait" mode=""></image>
							</view>
							<view class="name">
								{{item.member.realname}}
							</view>
							<view class="img1">
								<image src="../../static/kjsp.png" mode=""></image>
							</view>
							<view class="cont">
								砍了{{item.bargain_money}}元
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<qr-code-share :shareType='shareType' :shareUrl="shareUrl" @isShowShare="isShowShare" v-if="share" :shareimg='dataList.product.picture' :shareTitle='dataList.product.name' />
	</view>
</template>

<script>
	import qrCodeShare from '@/components/qr-code-share/qr-code-share';
	import {hostUrl} from "@/api/params";
	import { bargainView } from "@/api/product";
	import topSearch from "@/components/rf-topSearch/rf-topSearch"
	export default {
		components: {qrCodeShare,topSearch},
		data() {
			return {
			  isShow:false,
			  share:false,
			  shareType:'h5',
			  shareUrl:'',
			  dataList:[],
			  shopList:[],
			  bargainList:[],
			  hour:'00',
			  minute:'00',
			  second:'00',
			};
		},
		onHide(){
			clearInterval(this.interval)
		},
		onShow(){
			this.initData();
		},
		onLoad(option) {
			this.id = option.id;
			let routes = getCurrentPages();
			console.log(hostUrl)
			let curRoute = routes[routes.length - 1].route;
			this.shareUrl = hostUrl +'/pages/bargain/other' + '?id='+this.id;
		},
		methods:{
			gteNum(num){
				return parseFloat(num).toFixed(2)
			},
			submitOrder() {
				this.share = !this.share
				 this.isShow = !this.isShow 
			},
			isShowShare(e){
				this.share = false;
			},
			initData(){
				this.$get(`${bargainView}`, {id:this.id}).then(r => {
					console.log(r)
					this.dataList = r.data.bargainConfig
					this.shopList = r.data.bargaining
					this.bargainList = r.data.bargainList
					var timestamp = Date.parse(new Date())/1000;
					console.log(timestamp)
					console.log(this.dataList.end_time)
					
					let time = this.dataList.end_time - timestamp;
					this.hour = Math.floor(time/3600)<10?'0'+Math.floor(time/3600):Math.floor(time/3600);
					this.minute = Math.floor(time%3600/60)<10?'0'+Math.floor(time%3600/60):Math.floor(time%3600/60);
					this.second = Math.floor(time%3600%60)<10?'0'+Math.floor(time%3600%60):Math.floor(time%3600%60);
					if(time >0){
						this.initInterval();
					}
				}).catch((err) => {
					console.log(err)
				});
			},
			initInterval(){
				let that = this;
				this.interval = setInterval(function () {
					if(that.minute== '00'){
						that.minute = 60;
						that.hour -- ;
						if (that.hour<10){
							that.hour = '0'+that.hour;
						}
					}
					if(that.second==0){
						that.second = 60;
						that.minute -- ;
						if (that.minute<10){
							that.minute = '0'+that.minute;
						}
					}
					that.second--;
					if (that.second<10){
						that.second = '0'+that.second;
					}
					if (that.hour=='00' && that.minute=='00' && that.second == '00'){
						this.init();
					}
				},1000)
			},
			fan() {
				uni.navigateTo({
					url: `/pages/bargain/bargain`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	//隐藏框1
	.payment1 {
	  position: absolute;
	  width: 80%;
	  height: 50%;
	  top: 30%;
	  left: 10%;
	  padding: 15upx;
	  box-sizing: border-box;
	 background:linear-gradient(180deg,rgba(255,113,113,1) 0%,rgba(255,0,0,1) 100%);
	  // border: 1px solid #F3F3F3;
	  border-radius: 10px;
	  box-shadow: 0 0 100vh 100vh rgba(0,0,0,0.5);
	  z-index: 10;
	
		.tpp1 {
			position: relative;
			// background:linear-gradient(180deg,rgba(255,113,113,1) 0%,rgba(255,0,0,1) 100%);
			width: 100%;
			height: 100%;
			border-radius: 10px;
			// margin: 10upx;
			border: 1px solid rgba(255,220,109,1);
			.ff {
				position: absolute;
				width: 400upx;
				color: #FFFFFF;
				bottom: 50upx;
				left: 90upx;
				font-size: 12px;
			}
			.erwei {
				position: absolute;
				width: 330upx;
				height: 330upx;
				padding: 10upx;
				top: 280upx;
				left: 120upx;
				background-color: #FFFFFF;
				border-radius: 10px;
				image {
					width: 100%;
					height: 100%;
				
				}
			}
			.sao {
				color: #FFFFFF;
				position: absolute;
				top: 200upx;
				left: 120upx;
				letter-spacing:1px;
				font-family:PingFangSC-Medium,PingFang SC;
				font-size: 16px;
			}
			.tex {
				color: #FFFFFF;
				position: absolute;
				top: 64upx;
				left: 220upx;
				width: 260upx;
				letter-spacing:1px;
				font-family:PingFangSC-Regular,PingFang SC;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.con {
				position: absolute;
				top: 40upx;
				left: 80upx;
				width: 106upx;
				height: 106upx;
				border-radius: 50%;
				background-color: #FFFFFF;
				image {
					width: 60upx;
					height: 80upx;
					position: absolute;
					left: 22upx;
					top: 15upx;
					// border-radius: 50%;
				}
			}
			.del {
				  position: absolute;
				  right: 25upx;
				  top: 25upx;
				  width: 30upx;
				  height: 30upx;
				  image {
					  width: 100%;
					  height: 100%;
					}
				}
		}
	}
	//砍价进行
	.Normal {
		// margin-top: 30upx;
		// margin-left: 30upx;
		width: 100%;
		// height: 1000upx;
		padding: 30upx;
		background-color: #E04131;
		.non1 {
			width: 100%;
			// height: 400upx;
			background-color: #FFFFFF ;
			border-radius: 24upx;
			margin-bottom: 30upx;
			.top {
				position: relative;
				width: 100%;
				height: 100upx;
				background:rgba(255,93,93,1);
				border-radius:12px 12px 0 0;
					.jilu {
						position: absolute;
						display: inline-block;
						top: 35upx;
						left: 200upx;
						width: 28upx;
						height: 30upx;
						image {
							width: 100%;
							height: 100%;
							}
					}
					.title {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						font-size: 32upx;
						display: inline-block;
						color: #FFFFFF;
					}
					.jilu1 {
						position: absolute;
						display: inline-block;
						top: 35upx;
						left: 460upx;
						width: 28upx;
						height: 30upx;
						image {
							width: 100%;
							height: 100%;
							}
					}
				}
			.foot1 {
				width: 100%;
				// height: 300upx;
				.text {
					position: relative;
					width: 100%;
					height: 100upx;
					// background-color: #FF0000;
					.img {
						position: absolute;
						top: 20upx;
						left: 20upx;
						width: 68upx;
						height: 68upx;
						line-height: 100upx;
						border-radius: 100%;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.img1 {
						position: absolute;
						top: 15upx;
						left: 420upx;
						width: 46upx;
						height: 46upx;
						line-height: 100upx;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.name {
						position: absolute;
						letter-spacing:1px;
						top: 50%;
						left: 200upx;
						transform: translate(-50%,-50%);
						max-width: 190upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 30upx;
						color: #515151;
					}
					.cont {
						position: absolute;
						top: 22upx;
						left: 490upx;
						color: #FF0000;
						font-size: 30upx;
					}
				}
			}
	
		}
		.non {
			width: 100%;
			height: 400upx;
			background-color: #FFFFFF ;
			border-radius: 12px;
			margin-bottom: 30upx;
			.foot1 {
				width: 100%;
				height: 300upx;
				position: relative;
				.again {
					position: absolute;
					width: 420upx;
					height: 70upx;
					left: 150upx;
					bottom: 40upx;
					background:linear-gradient(90deg,rgba(255,48,48,1) 0%,rgba(255,0,0,1) 100%);
					border-radius:30px;
					color: #FFFFFF;
					text-align: center;
					line-height: 70upx;
				}
				
			
				.text {
					  position: absolute;
					  left: 170upx;
					  top: 30upx;
					  // margin-top: 50upx;
					  color: #000000;
			     	  font-size: 30upx;
					  float: right;
					  span {
							  margin-left: 7upx;
							  margin-right: 7upx;
							  color: #FF0000;
							  font-weight: bolder;
						  }
						
				}
				.tiao {
						  position: absolute;
						  top: 120upx;
						  left: 170upx;
						  width: 380upx;
						  height: 20upx;
						  border-radius: 10px;
						  background-color: #FFB6B6;
						  .tiao1 {
							  width: 360upx;
							  height: 100%;
							  border-radius: 10px;
							  background-color: #E00000;
						  }
				}
			}
			.top {
				position: relative;
				width: 400upx;
				height: 100upx;
				background:rgba(255,93,93,1);
				border-radius: 0 0 12px 12px;
				margin-left: 150upx;
			.time {
				width: 300upx;
				position: absolute;
				top: 20upx;
				left: 50upx;
				.cn {
					float: left;
					margin-left: 20upx;
					font-size: 24upx;
					margin-top: 4upx;
					line-height: 60upx;
					color: #FFFFFF;
					font-weight: bolder;
				}
				.tmm {
					width: 170upx;
					display: inline-block;
					// background-color: #f3f3f3;
					height: 40upx;
					float: left;
					margin-left: 20upx;
					font-size: 24upx;
					margin-top: 12upx;
					color:#FFFFFF;
					// background-color: #000;
					.one {
						float: left;
						height: 40upx;
						min-width: 40upx;
						background-color: #FFFFFF;
						color: #FF0000;
						border-radius: 3px;
						text-align: center;
						line-height: 40upx;
					}
					.mao {
						float: left;
						color: #FFFFFF;
						line-height: 40upx;
					}
					.two {
						float: left;
						height: 40upx;
						min-width: 40upx;
						background-color: #FFFFFF;
						color: #FF0000;;
						border-radius: 3px;
						text-align: center;
						line-height: 40upx;
					}
					.three {
						float: left;
						height: 40upx;
						min-width: 40upx;
						background-color: #FFFFFF;
						color: #FF0000;
						border-radius: 3px;
						text-align: center;
						line-height: 40upx;
						}
					}
				}
			}
		}
	}

	//头部图片
	.top {
		position: relative;
		width: 100%;
		height: 350upx;
		background:linear-gradient(360deg,rgba(255,0,0,1) 0%,rgba(255,60,60,1) 100%);
		// background-color: #000000;
		// margin-bottom: 20upx;
		image {
			width: 100%;
			height: 100%;
		}
		.Show {
			position: absolute;
			top: 30upx;
			left: 320upx;
			width: 220upx;
			height: 220upx;
			left: 50%;
			transform: translate(-50%);
			image {
				width: 100%;
				height: 100%;
			}
			}
	}
</style>
